<!--
 * new page
 * @author: denghao
 * @since: 2024-04-02
 * BottomPlayer.vue
-->
<template>
  <div class="ProgressLine">
    <div class="time">{{ showcurrenTime }}</div>
    <el-slider
      v-model="currenTime"
      @input="progressChange"
      :max="maxTime"
      :format-tooltip="realFormatSecond"
    />
    <div class="sum-time">{{ showmaxTime }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { realFormatSecond } from "@/utils/utils";
/**
 * ---------变量定义---------
 */
//当前时间
const currenTime = ref<number>(0);
const showcurrenTime = ref<string>("00:00");
// 最大时间
const maxTime = ref<number>(0);
const showmaxTime = ref<string>("00:00");

/**
 * ---------方法---------
 */
const emits = defineEmits(["moveSongTime"]);
const setCurrntTime = (cTime: number, sumTime: number) => {
  currenTime.value = cTime;
  maxTime.value = sumTime;
  showcurrenTime.value = realFormatSecond(cTime);
  showmaxTime.value = realFormatSecond(sumTime);
};
const progressChange = () => {
  emits("moveSongTime", currenTime.value);
  showcurrenTime.value = realFormatSecond(currenTime.value);
};

defineExpose({
  setCurrntTime,
});
</script>

<style lang="scss" scoped>
.ProgressLine {
  display: flex;
  align-items: center;
  .time {
    font-size: 11px;
    font-weight: 400;
    color: rgba(17, 93, 239, 1);
    margin-right: 15px;
  }
  .sum-time {
    font-size: 11px;
    font-weight: 400;
    color: rgba(17, 93, 239, 1);
    margin-left: 10px;
  }
}
</style>
